<template>

</template>

<script>
export default {
  name: "SeatsView"
}
</script><template>
  <div style="width: 1200px; margin: auto ;">

    <!--  步骤条开始  -->
    <div style="margin-bottom: 30px">
      <el-steps align-center="true">`
        <el-step title="选择影片场次" status="success"></el-step>
        <el-step title="选择座位" status="process"></el-step>
        <el-step title="14分钟内付款" status="wait"></el-step>
        <el-step title="影片取票观影" status="wait"></el-step>
      </el-steps>
    </div>
    <!--  步骤条结束  -->


    <el-rwo>
      <el-col :span="16" style="background-color: white;overflow: scroll">
        <div style="text-align: center">
          <i class="el-icon-suitcase-1" style="color: red">&nbsp;已选座位</i>&nbsp;&nbsp;
          <i class="el-icon-suitcase-1" style="color: black">&nbsp;未选座位</i>
        </div>
        <div style="width: 800px; margin-top:30px;text-align: center">屏幕中央</div>
        <!--    选座模块开始    -->
        <div style="width: 800px;margin: 0 auto ;text-align: center">
          <el-checkbox-group v-model="arr" :max="max" fill="pink" text-color="#fff">
            <el-checkbox-button v-for="(item,i) in m1"
                                :label="i"
                                style="margin-top: 20px"
                                @change="ch(0,i)"
                                :disabled="item">
              <i class="el-icon-suitcase-1" v-if="!item"></i>
              <i class="el-icon-suitcase-1" style="color: red" v-else></i>
            </el-checkbox-button>
            <br>
            <el-checkbox-button v-for="(item,i) in m2"
                                :label="i+30" style=""
                                @change="ch(1,i)"
                                :disabled="item">
              <i class="el-icon-suitcase-1" v-if="!item"></i>
              <i class="el-icon-suitcase-1" style="color: red" v-else></i>
            </el-checkbox-button>
            <br>
            <el-checkbox-button v-for="(item,i) in m3"
                                :label="i+60" style=""
                                @change="ch(2,i)"
                                :disabled="item">
              <i class="el-icon-suitcase-1" v-if="!item"></i>
              <i class="el-icon-suitcase-1" style="color: red" v-else></i>
            </el-checkbox-button>
            <br>
            <el-checkbox-button v-for="(item,i) in m4"
                                :label="i+90" style=""
                                @change="ch(3,i)"
                                :disabled="item">
              <i class="el-icon-suitcase-1" v-if="!item"></i>
              <i class="el-icon-suitcase-1" style="color: red" v-else></i>
            </el-checkbox-button>
            <br>
            <el-checkbox-button v-for="(item,i) in m5"
                                :label="i+120"
                                style="margin-left: 10px"
                                @change="ch(4,i)"
                                :disabled="item">
              <i class="el-icon-suitcase-1" v-if="!item"></i>
              <i class="el-icon-suitcase-1" style="color: red" v-else></i>
            </el-checkbox-button>
            <br>
            <el-checkbox-button v-for="(item,i) in m6"
                                :label="i+150"
                                style="margin-left: 10px"
                                @change="ch(5,i)"
                                :disabled="item">
              <i class="el-icon-suitcase-1" v-if="!item"></i>
              <i class="el-icon-suitcase-1" style="color: red" v-else></i>
            </el-checkbox-button>
            <br>
            <el-checkbox-button v-for="(item,i) in m7"
                                :label="i+180"
                                style="margin-left: 10px"
                                @change="ch(6,i)"
                                :disabled="item">
              <i class="el-icon-suitcase-1" v-if="!item"></i>
              <i class="el-icon-suitcase-1" style="color: red" v-else></i>
            </el-checkbox-button>
            <br>
          </el-checkbox-group>
        </div>
        <!--    选座模块结束   -->


      </el-col>
      <el-col :span="8" style="background-color:whitesmoke">
        <el-row>
          <el-col :span="8" style=" height: 200px; ">
            <div style="margin: 10px 0 10px 10px"><img src="/imgs/pomo1.png" alt="" width="100%"></div>
          </el-col>
          <el-col :span="16" style="height: 200px">
            <p style="font-size: 20px;font-weight: 700;color: #333;margin:  20px 0 14px 14px">
              第八个嫌疑人
            </p>
            <p style="font-size: 12px;font-weight: 700;color: #666;margin:  10px 14px 0 14px;">
              类型:<span style="color:#000;">&nbsp;犯罪</span>
            </p>
            <p style="font-size: 12px;font-weight: 700;color: #666;margin:  0 14px;">
              时长:<span style="color:#000;">&nbsp;111分钟</span>
            </p>
          </el-col>
          <p style="font-size: 14px;font-weight: 700;color: #666;margin:  10px 0 0 14px;">
            影院:<span style="color:#000;">&nbsp;{{msg.cinema}}</span>
          </p>
          <p style="font-size: 14px;font-weight: 700;color: #666;margin:  5px 14px;">
            影厅:<span style="color:#000;">&nbsp;{{msg.duration}}分钟</span>
          </p>
          <p style="font-size: 14px;font-weight: 700;color: #666;margin:  5px 14px;">
            版本:<span style="color:#000;">&nbsp;{{msg.version}}</span>
          </p>
          <p style="font-size: 14px;font-weight: 700;color: #666;margin:  5px 14px;">
            场次:<span style="color:#000;">&nbsp;{{msg.session}}</span>
          </p>
          <p style="font-size: 14px;font-weight: 700;color: #666;margin:  5px 14px;">
            票价:<span style="color:#000;">&nbsp;¥{{msg.price}}/张</span>
          </p>
          <hr>

          <div style="height: 200px">
            <p style="font-size: 14px;font-weight: 700;color: #666;margin:  5px 14px;">
              座位: <span v-if="total==0">一次最多选择5个座位</span>
              <span style="width: 200px; color: #fff; background: #42b983;  margin-left:5px; " v-for="item in seats"
                    v-if="item.col!=0">
              {{ item.rwo }}排，{{ item.col }}号
              </span>
            </p>

            <div style="margin-top:30px;text-align: center " v-if="total==0">请点击左侧座位图选择座位</div>
            <p style="font-size: 14px;font-weight: 700;color: #000;margin:  5px 14px;">
              总价: <span style="color: red; font-size: 14px">¥</span>
              <span style="color: red; font-size: 25px">&nbsp;{{total}}</span>
            </p>
            <hr>
            <div style="text-align: center">
              <el-button round type="danger" style="width: 50%;" v-if="total!=0">购票</el-button>
              <el-button round type="danger" style="width: 50%;" disabled v-else>购票</el-button>
            </div>
          </div>
        </el-row>
      </el-col>
    </el-rwo>


  </div>


</template>

<script>
export default {
  name: "Seats",
  data() {
    return {
      price:30,
      total:0,

      max: 5,
      arr: [],
      m6: [true, false, false, false, false, false, false, true, false, false],
      m7: [true, false, false, false, false, false, false, true, false, false],

      m1: [true, false, false, false, false, false, false, true, false, false],
      m2: [false, false, false, false, false, false, false, false, false, false, false, false],
      m3: [false, false, true, false, false, false, true, false],
      m4: [false, false, false, false, true, true, false, false, false],
      m5: [false, false, false, false, false, false, false, true, false, false],
      seats: [{rwo: "0", col: "0"}, {rwo: "0", col: "0"}, {rwo: "0", col: "0"}, {rwo: "0", col: "0"}, {
        rwo: "0",
        col: "0"
      },],

      msg:{
        movieName:"第八个嫌疑人",
        category:"剧情,犯罪",
        duration:"111",
        cinema:"地表最强影院",
        hall:"IMAX激光影厅",
        version:"国语2D",
        session:"2023/10/01/15:23",
        price:30.00
      }

    }
  },
  methods: {
    ch(r, c) {
      console.log("选的是" + (r + 1) + "行" + (c + 1) + "列");
      for (let i = 0; i < this.seats.length; i++) {
        for (let j = 0; j < this.seats.length; j++) {
          if (this.seats[j].rwo == r + 1 && this.seats[j].col == c + 1) {
            //判断是否为选择过的位置,取消选择
            this.seats[j].rwo = 0;
            this.seats[j].col = 0;
            //减去总价
            this.total-=this.price;

            for (let i = 0; i < 5; i++) {
              console.log(this.seats[i].rwo + "," + this.seats[i].col);
            }
            return;
          }
        }
        if (this.seats[i].rwo == 0 && this.seats[i].col == 0) {
          //添加选位置
          this.seats[i].rwo = r + 1;
          this.seats[i].col = c + 1;
          //总价
          this.total+=this.price;
          for (let i = 0; i < 5; i++) {
            console.log(this.seats[i].rwo + "," + this.seats[i].col);
          }
          if (this.seats[4].rwo != 0) {
            this.$message.success("最多只能选五张票");
          }
          return;
        }

      }
    },
  },

}
</script>

<style scoped>

p {
  margin: 0;

}

</style>

<style scoped>

</style>